<template>
  <view class="content">
    <view class="user-head">
      <HeadImage />
    </view>
    <view class="info-block">
      <InfoListItem text="词汇量" :detail="learned" className="bdb" />
      <InfoListItem text="课程" detail="1" className="bdb" />
      <InfoListItem text="联系我们" detail=" " @click.native="onContact"/>
    </view>
    <!-- <view class="info-block">
      <InfoListItem text="手机号码" detail="1" className="bdb" />
      <InfoListItem text="真实姓名" detail="1" className="bdb" />
      <InfoListItem text="性别" detail="1" />
    </view> -->
  </view>
</template>

<script>
import HeadImage from "@/components/mine/HeadImage";
import InfoListItem from "@/components/mine/InfoListItem";
import util from '../../util/util'

export default {
  components: {
    HeadImage,
    InfoListItem
  },
  data() {
    return {
      learned:0,
      learnedIds: [],
    };
  },
  onLoad() {
    this.getCourseMatrix()
  },
  methods: {
    onContact() {
      wx.showModal({
        content: '微信号：hsian_',
        cancelText:'取消',
        confirmText:'确定',
        success(res){
          
        }
      })
    },

    // 获取已经学习过的单词
    async getCourseMatrix() {
      const res = await util.request({
        url: '/api/user_course_matrix/',
        data: {
          course_id: 1
        }
      })

      const {data} = res.data
      const len = Object.values(data).filter(v => v >= 2).length
      this.learned = len
    },
  }
};
</script> 

<style>
.content {
  background-color: #f5f5f5;
  /* background-color: #b49b9b; */
  min-height: 100vh;
  padding: 0 20rpx;
}
.user-head {
  padding: 40rpx;
}
.info-block {
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 40rpx;
  padding: 0 20rpx;
}
.bdb {
  border-bottom: 1px dashed #ccc;
}
</style>